<template>
  <view class="ai-quick-reply" :class="{new: isNew, highlight: isHighlight}" type="button" @click="handleClick">
    <view class="ai-quick-reply-inner">
      <ai-icon v-if="icon" :type="icon" class="ai-quick-reply-icon"></ai-icon>
      <image v-if="img" class="ai-quick-reply-img" :src="img" />
      <text>{{name}}</text>
    </view>
  </view>
</template>

<script>
  export default {
    name: "ai-quick-reply",
    emits: ["click"],
    props: {
      name: String,
      code: String,
      icon: String,
      img: {
        type: String,
        default: ""
      },
      isNew: Boolean,
      isHighlight: Boolean
    },
    data() {
      return {

      };
    },
    methods: {
      handleClick() {
        let code = this.code
        let name = this.name
        this.$emit("click", {code, name})
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  .ai-quick-reply {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 4px 12px;
    border: 1px solid transparent;
    border-radius: 99px;
    line-height: 20px;
    background: var(--white);
    cursor: pointer;
    color: var(--gray-1);
    font-size: $quick-reply-font-size;
    cursor: pointer;
    transition: 0.15s ease-in-out;

    &.new::after {
      content: '';
      position: absolute;
      top: $quick-reply-dot-top;
      right: $quick-reply-dot-right;
      width: $quick-reply-dot-size;
      height: $quick-reply-dot-size;
      background: $quick-reply-dot-bg;
      overflow: hidden;
      border: 1px solid #fff;
      border-radius: 50%;
    }

    &.highlight {
      background: #fff;
      border-color: #ffd0bf;
      font-weight: 500;
    }

    &-inner {
      display: flex;
      align-items: center;
    }

    &-img {
      max-height: 13px;
    }

    &-icon,
    &-img {
      margin-right: 3px;
    }

    .ai-icon {
      color: var(--brand-1);
      font-size: 15px;
    }
  }
</style>